<template>
  <div>
    <el-submenu v-if="item.children && item.children.length!==0" ref="subMenu" :index="item.path" popper-append-to-body>
      <template slot="title">
        <i v-if="item.icon" :class="item.icon" />
        <span>{{item.title}}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="child.path"
        class="nest-menu"
      />
    </el-submenu>
    <template v-else>
      <el-menu-item :index="item.path" :class="{'submenu-title-noDropdown':true}">
        <i v-if="item.icon" :class="item.icon" />
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
    </template>
      
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  props:{
    item: {
      type: Object,
      required: true
    },
  },
  mounted(){
    console.log(this.item)
  }
}
</script>
